<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>作业</title>
    </head>
    <body>
        <div class="head">
            <a href="#" class="logo"><img src="http://pic.k73.com/up/soft/2017/0217/115751_45221623.jpg" id="img"></a>
            <ul class="ul">
                <li>
                    <a href="https://www.baidu.com/">链接1</a>
                </li>
                <li>
                    <a href="https://www.baidu.com/">链接2</a>
                </li>
                <li>
                    <a href="https://www.baidu.com/">链接3</a>
                </li>
            </ul>
        </div>
        <form class="form">
            <input type="hidden" value="不给你看" />
            <h2>请完善个人信息</h2><br/>
            <ul>
                <li><span><b>账</b></span>号:<input value="请输入" maxlength="12"/></li>
                <li><span><b>密</b></span>码:<input type="password" maxlength="20"/></li>
            <li><span><b>姓</b></span>名:<input value="请输入" title="请输入真实个人信息" maxlength="8"/></li>
            <li class="gender"><span><b>性</b></span>别:<input name="gender" type="radio" />男<input name="gender" type="radio" />女
            </li>
            <li class="like">
                <span><b>喜</b></span>不喜欢小白:
                <li><input name="like" type="checkbox" />喜欢</li>
                <li><input name="like" type="checkbox" />特别喜欢</li>
                <li><input name="like" type="checkbox" />不可能不喜欢</li>
            </li>
            <li><span><b>备</b></span>注:<input type="" /></li>
            <input type="reset" />
            <input type="submit" />
        </ul>
        </form>
        <div class="box">
            <ul>
                <li class="li1">11</li>
                <li class="li1-2">12</li>
                <li class="li1-3">13</li>
                <li class="li14">14</li>
                <p title="number">14.1</p>
            </ul>
            <ul>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
            </ul>
            <h2>野生标题君</h2>
        </div>
    </body>
</html>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .head{
        position: relative;
        margin: 50px,40px;
            margin-left: 50px;
            margin-top: 40px;
        vertical-align: middle;
        display: inline-block;
    }
    .head .logo{
        display: inline-block;
        height: 82px;
        position: relative;
        margin-right: 30px;
        vertical-align: middle;
    }
    .head #img{
        width: 80px;
        border: 1px dotted black;
        margin: 10px;
    }
    .head .ul{
        list-style-type:none;
        display: inline-block;
        margin: 0;
        vertical-align: middle;
    }
    .ul li{
        display: inline-block;
        vertical-align: middle;
    }
    ul a{
        float:left;
        width:7em;
        text-decoration:none;
        color:white;
        background-color:yellow;
        padding:0.2em 0.6em;
        border-right:1px solid white;
        cursor: pointer;
    }
    ul{
        list-style-type:none;
    }
    a:link {
        color:white;
    }
    a:visited {
        color:black;
    }
    a:hover {
        color:#FF00FF;
    }
    a:active {
        color:#0000FF;
    }
    .form{
        margin: 100px;
        padding: 20px;
    }
    span {
        float: left;
        width: 0.7em;
        font-size: 125%;
        font-family: algerian,courier;
        line-height: 80%;
    }
    ul>li{
        line-height: 40px;
    }
    input:focus{
        background: burlywood;
    }
    .box{
        margin: 100px;
        padding: 20px;
    }
    li[class*="li1"]{
        line-height: 22px;
    }
    li+p{
        background-color:yellow;
    }
    [title~=number]{
        border:5px solid black;
    }
    [class|=li1]{
        border:1px solid black;
    }
    p:first-letter, .box li:first-child{
        font-size:125%;
        color:#8A2BE2;
    }
    p::after, p::before{
        content:url(http://pic.uzzf.com/up/2017-2/14873018711362378.jpg);
    }
    li {
        color: #000000;
    }
    .box :not(li) {
        color: #ff0000;
    }
</style>